@charset "UTF-8";
@import "../common/scss/mixins";
@import "../common/scss/sprites";

.hr{
  height: 1px;
  margin: 0.8rem 0;
  position: relative;
  border-bottom:1.5px solid $border01;
}

.gap-h1{
  height: 1.4rem;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  background-color: $bg02;
}
.quantity-form {
  @include module-quantity();
}
.opt-full-btn,.calendar-full-btn{
  button{
    display: block;
    width: 100%;
    background-color:$bg04;
    height: 4.95rem;
    font-size:$fs18;
    color:$color10;
    border: 0;
    sub{font-size:$fs11;margin-right:0.4rem;}
    &.disabled{
      background-color:$border02;
    }
  }
}


.slidein {
  @include slideLn(
    $duration: .5s,
    $count: 1,
    $delay: 0s,
    $function: ease, 
    $fill: none
  );
}

.slideout {
  @include slideOut(
    $duration: .5s,
    $count: 1,
    $delay: 0s,
    $function: ease, 
    $fill: none
  );
}

.fadein {
  @include fadeIn(
    $duration: 1s,
    $count: 1,
    $delay: 0s,
    $function: ease, 
    $fill: both
  );
}

.fadeout {
  @include fadeOut(
    $duration: 1s,
    $count: 1,
    $delay: 0s,
    $function: ease, 
    $fill: both
  );
}

.shake {
  @include shake(
    $duration: 1s,
    $count: 1,
    $delay: 0s,
    $function: ease, 
    $fill: both
  );
}




.icon-home{
  @include mix-home();
}
.icon-order{
  @include mix-order();
}
.icon-user{
  @include mix-user();
}

.tools-menu{
  @extend  .flex-row;
  position: relative;  
  &>div{
    @extend .flex-item;
    text-align: center;
    height: 4.05rem;
    padding-top: 0.65rem;
    margin-top: 0.1rem;
    align-content: space-between;
  border-top:1px solid $border02;
  &:first-child{
    border-right:1px solid $border02;
  }
    span{
      display: block;
      font-size: $fs10;
      color:$color01;
    }
    &.active{
    .icon-home{
      @include mix-home-hover();
    }
    .icon-order{
      @include mix-order-hover();
    }
    .icon-user{
      @include mix-user-hover();
    }
    span{
      color:$color06;
    }
  }
  }
}

